<template>
  <el-container style="height: 100vh;">
    <el-header style="background-color: #21232c;color: #ffffff;font-size:14px;padding: 0;">
<!--      <layoutHeader/>-->
    </el-header>
    <el-container>
      <el-aside width="200px">
        <el-menu
            unique-opened
            active-text-color="#ffd04b"
            background-color="#545c64"
            class="el-menu-vertical-demo"
            text-color="#fff"
            :default-active="reactiveInfo.value"
            @select="handleSelect"
            style="width: 100%">
          <menuTree :menu="reactiveInfo.list.menu"/>
        </el-menu>
      </el-aside>
      <el-main style="padding: 0">
        <el-tabs type="card" v-model="reactiveInfo.value" @tab-click="tabClickFun" @tab-remove="tabRemoveFun">
          <el-tab-pane :closable="item !== 'David'" v-for="item in reactiveInfo.list.tab" :key="item.code" :name="item" :label="item" class="h100">

              <router-view v-slot="{ Component }">
                <keep-alive>
                  <component :is="Component" />
                </keep-alive>
              </router-view>

          </el-tab-pane>
        </el-tabs>
        <SvgIcon iconClass="home" style="margin-right: 5px;" />
<!--        <el-button :type="reactiveInfo.value" @click="reactiveInfo.value = 'success'">6666</el-button>-->
      </el-main>
    </el-container>
  </el-container>
</template>


<script setup lang="ts">
import {reactive, toRefs, watch} from "vue";
import {useStore} from "@/pinia";
import {storeToRefs} from "pinia";

import menuTree from './components/menuTree.vue'

let main = useStore()
let {login,tabArr,tabValue} = storeToRefs(main)
let reactiveInfo = reactive({
  value:tabValue,
  list:{
    menu:login.value,
    tab:tabArr.value
  }
})
const handleSelect = (key: any, keyPath: any) => {
  main.pushTagData(key)
}
// tab 被选中时触发
let tabClickFun = (key:any)=>{
  main.clickTagData(key.props.name)
}
// 点击 tab 移除按钮时触发
let tabRemoveFun = (name:any)=>{
  main.deleteTagData(name)
}
</script>

<style scoped>

</style>